<style lang="scss" scoped>
  .leftpad{
    width: 29.06vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .front{
      .title{
        font-size: 0.833vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #00D1E3;
        opacity: 1;
        margin-bottom: 0.625vw;
      }
      .lis{
        width: 29.06vw;
        height: 7.6vw;
        background: rgba(4, 146, 164, 0.1);
        opacity: 1;
        box-sizing: border-box;
        padding: 0.156vw 0.52vw 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .li:first-child, .li:last-child{
          width: 4.79vw;
          height: 4.84vw;
          border: 0.5px solid rgba(192, 208, 231, 0.1);
          opacity: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          .name{
            font-size: 0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
            margin-bottom: 0.781vw;
          }
          .num{
            font-size: 0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E6F1F5;
            span{
              font-size: 0.729vw;
              font-family: DIN;
              font-weight: 500;
              color: #FF6400;
              opacity: 1;
              line-height: 0.833vw;
            }
            .type{
              opacity: 0.5;
              margin-left: 0.52vw;
              color: #E6F1F5;
              opacity: 0.5;
            }
          }
        }
        .li:last-child{
          width: 5.2vw;
        }
        .li:nth-child(2), .li:nth-child(3){
          position: relative;
          display: flex;
          width: 7.29vw;
          height: 4.84vw;
          border: 0.5px solid rgba(192, 208, 231, 0.1);
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .li_:first-child{
            margin-bottom: 0.52vw;
          }
          .li_{
            display: flex;
            justify-content: center;
            align-items: center;
            span{
              font-size: 0.573vw;
              font-family: PingFang SC;
              font-weight: 400;
              color: #E3E3E3;
            }
            .num{
              margin: 0 0.52vw 0 0.52vw;
              width: 1.667vw;
              font-size: 0.625vw;
              font-family: DIN;
              font-weight: 400;
              color: #FF6400;
              text-align: right;
            }
            .type{
              font-size: 0.573vw;
              font-family: PingFang SC;
              font-weight: 400;
              color: #E6F1F5;
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
</style>
<template>
  <div class="leftpad">
    <div class="front">
      <div class="title">就地化处理</div>
      <div class="lis bot_s">
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">设备总数</div>
          <div class="num"><span>{{localData.deviceTotal || 0}}</span> <span class="type">个</span></div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="li_">
            <span>当日进料</span>
            <div class="num">{{localData.feedingToday}}</div>
            <div class="type">吨</div>
          </div>
          <div class="li_">
            <span>当日出料</span>
            <div class="num">{{localData.dischargeToday}}</div>
            <div class="type">吨</div>
          </div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="li_">
            <span>累计进料</span>
            <div class="num">{{localData.feedingTotal}}</div>
            <div class="type">吨</div>
          </div>
          <div class="li_">
            <span>累计出料</span>
            <div class="num">{{localData.dischargeTotal}}</div>
            <div class="type">吨</div>
          </div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">总处理能力</div>
          <div class="num"><span>{{localData.processingPower || 0}}</span> <span class="type">吨</span></div>
        </div>
      </div>
    </div>
    <padrightcurrent></padrightcurrent>
    <processing></processing>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import {getGarbagDisposalDeviceStatistics
} from "@/api/screem";
import padrightcurrent from './padrightcurrent.vue'
import processing from './processing.vue'

export default {
  name: "screem",
  data() {
    return {
      initTimer: null,
      localData: {},
    };
  },
  created() {
   this.pullInit()
  },
  mounted() {
  },
  props: [],
  components: {padrightcurrent, processing},
  methods: {
    pullInit() {
      this.init()
      this.initTimer = setInterval(() => {
        this.init()
      }, 60000)
    },
    init() {
      getGarbagDisposalDeviceStatistics()
        .then(res => {
          this.localData = res.data || {}
        })

    }
  },
  beforeDestroy() {
    if (this.initTimer ) {
      clearInterval(this.initTimer )
    }
  }
};
</script>


